<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

// 地图实例
const map = ref(null);
// 中心点坐标
const center = ref([104.110893, 30.71495]);
// 自定义的消息框
const infoWindow = ref(null);
// 路径规划
const driving = ref(null);

// 根据名称搜索路径，系统取数组第一个元素和最后一个元素作为起点和终点，中间元素为途经点；
const search_by_name = (start, end) => {
  driving.value.search(
    [
      { keyword: start.position, city: start.city },
      { keyword: end.position, city: end.city },
    ],
    function (status, result) {
      // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
      if (status === "complete") {
        console.log("绘制驾车路线完成", result);
      } else {
        console.log("获取驾车数据失败：" + result);
      }
    }
  );
};

// 根据经纬度搜索路径
const search_by_lnglat = (start, end) => {
  driving.value.search(
    new AMap.LngLat(start.lng, start.lat),
    new AMap.LngLat(end.lng, end.lat),
    function (status, result) {
      // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
      if (status === "complete") {
        console.log("绘制驾车路线完成", result);
      } else {
        console.log("获取驾车数据失败：" + result);
      }
    }
  );
};

// 绘制路径
const draw_path = (trackPath) => {
  const path = new AMap.Polyline({
    path: null,
    isOutline: false,     //线条是否带描边，默认false
    outlineColor: '#ffeeff',//线条描边颜色，此项仅在isOutline为true时有效，默认：#000000
    borderWeight: 1,    //描边的宽度，默认为1
    strokeColor: "#3366FF", //线条颜色，使用16进制颜色代码赋值。默认值为#006600
    strokeOpacity: 1,   //线条透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
    strokeWeight: 8,    //线条宽度，单位：像素
    // 折线样式还支持 'dashed'
    strokeStyle: "solid",  //线样式，实线:solid，虚线:dashed
    // strokeStyle是dashed时有效
    strokeDasharray: [10, 5],//勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效
    lineJoin: 'round',    //折线拐点的绘制样式，默认值为'miter'尖角，其他可选值：'round'圆角、'bevel'斜角
    lineCap: 'round',   //折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头
    zIndex: 150,       //折线覆盖物的叠加顺序。默认叠加顺序，先添加的线在底层，后添加的线在上层。通过该属性可调整叠加顺序，使级别较高的折线覆盖物在上层显示默认zIndex：50、
  });
  // 将折线添加至地图实例
  map.value.add(path);
  path.setPath(trackPath);
  path.show();
};

onMounted(() => {
  window._AMapSecurityConfig = {
    // 请的安全密钥
    securityJsCode: "27baeecd5b6b6cd6baa44e7dbfa96664",
  };

  AMapLoader.load({
    //申请好的 Web 端开发 Key，首次调用 load 时必填
    key: "9dc5754c7fa988bd8e0151a9cae4216c",
    version: "2.0",
    plugins: [
      // 预加载核心插件
      "AMap.Scale",
      "AMap.ToolBar",
      "AMap.HawkEye",
      "AMap.MapType",
      "AMap.Geolocation",
      "AMap.AutoComplete",
      "AMap.PlaceSearch",
      "AMap.Driving",
      "AMap.DragRoute",
    ],
  })
    .then((AMap) => {
      // 初始化地图
      map.value = new AMap.Map("container", {
        zoom: 20, // 缩放级别
        center: center.value, // 中心点坐标
        viewMode: "2D", // 明确指定视图模式
        // mapStyle: "amap://styles/grey", // 设置地图的显示样式
      });

      // 添加控件
      map.value.addControl(new AMap.Scale());// 显示当前地图中心的比例尺
      map.value.addControl(new AMap.ToolBar());// 工具条控件;范围选择控件
      map.value.addControl(new AMap.HawkEye());// 显示缩略图
      map.value.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换
      map.value.addControl(new AMap.Geolocation());// 定位当前位置


      // 添加点击事件监听器
      map.value.on("click", (e) => {
        const { lng, lat } = e.lnglat;
        console.log("点击了地图:", lng, lat);
      });

      // 创建一个icon
      const customIcon = new AMap.Icon({
        image: "定位.png", // 图标地址
        // 图标尺寸
        size: new AMap.Size(40, 40),
        // 图标实际显示尺寸
        imageSize: new AMap.Size(40, 40),
      });

      const marker = new AMap.Marker({
        map: map.value, // 所属的地图实例
        position: new AMap.LngLat(center.value[0], center.value[1]), // 位置
        icon: customIcon, // 添加 icon
        // 设置偏移量，确保图片居中
        offset: new AMap.Pixel(-20, -40),
      });

      // 添加信息窗体
      infoWindow.value = new AMap.InfoWindow({
        content: `<div class='custom-info-window'>
          <div class="content">杨老六笨的很</div>
          <div class='close-btn'>x</div>
          </div>`,
        offset: new AMap.Pixel(0, -30),
        isCustom: true,
        autoMove: true,
        avoid: [20, 20, 20, 20],
        closeWhenClickMap: true,
      });

      marker.on("click", (e) => {
        console.log("点击了 marker:", e);
        infoWindow.value.open(map.value, e.target.getPosition());
        const close_btn = document.querySelector(".close-btn");
        close_btn.removeEventListener("click", close_info);
        close_btn.addEventListener("click", close_info);
      });

      // 路线规划
      const goView = () => {
        // 驾车路线规划服务，提供可带途经点的起点、终点的驾车导航路线查询功能
        driving.value = new AMap.Driving({
          map: map.value,
          // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
          policy: AMap.DrivingPolicy.LEAST_TIME,
          // panel 指定将结构化的路线详情数据显示的对应的DOM上，传入值需是DOM的ID
          panel: "panel",
        });

        // 根据起终点经纬度规划驾车导航路线
        // 1、根据名称搜索路径
        // search_by_name({position: "动物园", city: "成都市"}, {position: "骡马市", city: "成都市"});
        // 2、根据起终点经纬度规划驾车导航路线
        search_by_lnglat(
          { lng: 104.110893, lat: 30.71495 },
          { lng: 104.065617, lat: 30.666514 }
        );
      };

      goView(); // 获取线路规划

      // 绘制地图路线
      const trackPath = []
      trackPath.push(new AMap.LngLat(104.110893,30.71495));
      trackPath.push(new AMap.LngLat(104.065617,30.666514));
      draw_path(trackPath);

      console.log("地图加载成功:", map.value);
    })
    .catch((error) => {
      console.error("地图加载失败:", error);
    });
});

onUnmounted(() => {
  if (map.value) {
    map.value.destroy();
  }
});

const close_info = () => {
  console.log("点击了关闭按钮");
  infoWindow.value.close();
};
</script>

<template>
  <div id="container"></div>
  <div id="panel" />
</template>

<style scoped>
#container {
  width: 100%;
  height: 100%;
  border: 2px solid red;
}

/* 因为动态生成的DOM元素不受Vue的scoped样式影响，需要使用深度选择器。 */
/* 为了解决这个问题，我们可以使用`:deep(.custom-info-window)`来穿透作用域样式。 */
:deep(.custom-info-window) {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: cadetblue;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  text-align: center;
  color: white;
}

:deep(.content) {
  line-height: 200px;
  /* 防止用户误选中文字时出现I型光标 */
  user-select: none;
}

:deep(.close-btn) {
  position: absolute;
  right: 10px;
  top: 5px;
  /* 防止用户误选中文字时出现I型光标 */
  user-select: none;
}

:deep(.close-btn:hover) {
  cursor: pointer;
  color: #ff4444;
}
</style>
